<template>
	<view class="list-outer">
		<view v-for="(chapter, cIndex) in docList" :key="cIndex" class="collapse-box">
			<!-- 一级菜单 -->
			<u-cell :title="chapter.name" is-link :arrow-direction="chapter.open ? 'down' : 'right'" :border="false"
				@click="chapter.open = !chapter.open"
				title-style="font-weight: 500; font-size: 28rpx; color: #131D34" />
			<view class="collapse-wrapper" :class="{ open: chapter.open }">
				<view class="collapse-content">
					<view v-for="(section, sIndex) in chapter.children" :key="sIndex" class="section-box">
						<template v-if="section.children && section.children.length">
							<!-- 二级菜单---有三级结构 -->
							<u-cell :title="section.name" is-link :arrow-direction="section.open ? 'down' : 'right'"
								:border="false" @click="section.open = !section.open"
								title-style="font-weight: 400; font-size: 26rpx; color: #131D34;" />
							<view class="collapse-wrapper" :class="{ open: section.open }">
								<view class="collapse-content-3">
									<!-- 三级菜单 -->
									<view @click="goNext(item, section.children)"
										v-for="(item, iIndex) in section.children" :key="iIndex" class="sub-text">
										{{ item.name }}
										<image v-if="item.is_staduy" src="@/static/img02/14.png" alt="" />
									</view>

								</view>
							</view>
						</template>

						<template v-else>
							<view class="collapse-content-3">
								<!-- 三级菜单 -->
								<view class="sub-text" @click="goNext(section,chapter.children)">
									{{ section.name }}
									<image v-if="section.is_staduy" src="@/static/img02/14.png" alt="" />
								</view>

							</view>

						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			course: String
		},
		data() {
			return {
				docList: []
			};
		},
		mounted() {
			this.get_course_chapterApi()
		},
		methods: {
			async get_course_chapterApi() {
				let res = await this.$api.post(global.apiUrls.post680ef6818697f95795, {
					course_id: this.course,
				})

				if (res.data.code == 1) {
					this.docList = this.addOpenFalse(res.data.data.list)

					this.$emit('myEvent', res.data.data.num);
				}
			},
			addOpenFalse(data) {
				return data.map(item => {
					item.open = false;
					if (item.children && Array.isArray(item.children)) {
						item.children = this.addOpenFalse(item.children);
					}
					return item;
				});
			},
			goNext(val, arr) {

				let list = []
				const index = arr.findIndex(item => item.aid === val.aid)
				if (index === -1) {
					list = []
				} else {
					list = arr.slice(index)
				}

				const aidList = list.map((item) => item.aid)

				this.$urouter.navigateTo(
					`/pages/course/chapter/chapter?aidList=${aidList}`
				);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.list-outer {
		padding: 20rpx 0;
	}

	.collapse-box {
		margin-bottom: 20rpx;
	}

	.section-box {
		margin-left: 20rpx;
	}



	/* 展开动画效果 */
	.collapse-wrapper {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s ease;
	}

	.collapse-wrapper.open {
		max-height: 1000rpx;
	}

	.collapse-content {
		padding: 10rpx 0;
	}

	.collapse-content-3 {
		padding: 10rpx 0;


		.sub-text {
			margin-left: 40rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #131D34;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
		}

		image {
			width: 26rpx;
			height: 26rpx;
			// margin-top: 10rpx;
			margin-left: 16rpx;
		}
	}
</style>